<template>
    <div>
    <div class="datail-img">
        <img :src="songlist.pic_s192" alt="">
    </div>
        <ul>
            <li v-for="(item,index) in songList1" :key="index" @click="changeUrl(item.song_id)">
                <p>{{item.title}}</p>
                <span>{{item.author}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    import {getSongList} from "../api/api";
    // import songList from "./songList";

    export default {
        name: "listDetail",
        data(){
            return{
                songlist:[],
                songList1:[]
            }
        },
        created() {
            getSongList(this.$route.query.type,20).then(res=>{
                // console.log(res)
                this.songlist = res.billboard;
                this.songList1 = res.song_list;
                console.log(this.songList1)
            })
        },
        methods:{
            changeUrl(i){
                this.$router.push("/musicDetail?songId="+i)
            }
        }
    }
</script>

<style lang="less" scoped>
.datail-img{
    img{
        height: 200px;
        width: 100%;
    }
}
    ul{
        height: calc(100vh - 250px);
        overflow: scroll;
        li{
            width: calc(100% - 40px);
            margin: 0 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #999999;
            p{
                padding: 0;
                margin: 0;
                width: 100%;
                height: 30px;
                line-height: 40px;

            }
            span{
                color: #999999;
                font-size: 12px;
            }
        }
    }
</style>